<template>
  <view class="page">
    <view class="top-box">
      <u-steps :current="activeStep" activeColor="#FFB850" inactiveColor="#FFD28E">
        <u-steps-item :title="item.name" v-for="item in steps" :key=item.name></u-steps-item>
      </u-steps>
    </view>
    <block v-if="activeStep == 0">
      <view class="box">
        <view class="box-item flex">
          <view class="box-item-1"><span>*</span>策划师姓名</view>
          <input type="text" v-model="form.name" placeholder="请输入姓名" />
        </view>
        <view class="box-item flex">
          <view class="box-item-1"><span>*</span>联系方式</view>
          <input type="number" v-model="form.phone" placeholder="请输入联系方式" maxlength="11" />
        </view>
        <view class="box-item flex" @click="tapArea">
          <view class="box-item-1"><span>*</span>所在城市</view>
          <input type="number" placeholder="请选择" disabled v-model="form.areaAddress" />
        </view>
        <view class="box-item flex" style="border: none;">
          <view class="box-item-1"><span>*</span>介绍</view>
        </view>
        <u-textarea v-model="form.introduce" placeholder="请简单介绍一下自己"></u-textarea>
        <view class="box-item flex" style="border: none;">
          <view class="box-item-1"><span>*</span>身份认证</view>
        </view>
        <view class="tips">请上传能够认证您身份的图片，例如：您的名片，企业微信，钉钉或者飞书等企业通讯名片截图，或者您所在公司给您盖章背书的文字材料！</view>
        <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
          width="130" height="95">
          <div class="upload">
            <image :src="imgApi + 'images/wallet/icon-20.svg'" mode=""></image>点击上传
          </div>
        </u-upload>
      </view>
      <view class="box" style="padding-bottom: 0;">
        <view class="box-title">收款账户</view>
        <view class="box-item flex">
          <view class="box-item-1"><span>*</span>开户行</view>
          <input type="text" v-model="form.back_name" placeholder="请输入开户行" />
        </view>
        <view class="box-item flex">
          <view class="box-item-1"><span>*</span>开户名</view>
          <input type="text" v-model="form.account_name" placeholder="请输入开户名" />
        </view>
        <view class="box-item flex" style="border: none;">
          <view class="box-item-1"><span>*</span>银行账号</view>
          <input type="number" v-model="form.back_number" placeholder="请输入银行账号" />
        </view>
      </view>
      <view class="kong"></view>
      <view class="bottom-flex">
        <view class="btn" @click="handleSub">提交申请</view>
      </view>
      <lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"
        v-model="lotusAddressData.visible"></lotus-address>
    </block>
    <block v-if="activeStep == 1">
      <view class="box" style="padding: 30rpx 0;">
        <u-icon name="clock-fill" color="#FFBB50" size="38"></u-icon>
        <view class="box-titles">提交成功,会有我们的专门的专员与您联系</view>
      </view>
    </block>
    <block v-else>
      <view class="box" style="padding: 30rpx 0;">
        <u-icon name="checkmark-circle-fill" color="#FFBB50" size="38"></u-icon>
        <view class="box-titles">审核通过</view>
      </view>
      <view class="box-con-1 flex">
        <view class="box-con-1-1"><span>1.</span>上传方案、产品、课程请登录</view>
        <view class="box-con-1-2">https://www.atuanjian.com/</view>
        <view class="box-con-1-2" @click="handleCopy">复制</view>
      </view>
      <view class="box-con-1 flex" style="margin-top: 30rpx;">
        <view class="box-con-1-1"><span>2.</span>登录账号密码为当前小程序登录账号密码</view>
      </view>
      <view class="tip" @click="handleCall">
        <image :src="showImgApi + obj.customer_service_qr_code.values" mode="scaleToFill" class="er-img" />
        <view class="number"><span>{{ obj.service_phone.values }}</span></view>
        <view class="tip-con">我是您的专属顾问，您可以扫描二维码添加我的微信，如有问题可以随时联系我~</view>
      </view>
    </block>
  </view>
</template>
<script>
import form from "uview-ui/libs/config/props/form";
import lotusAddress from "../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
import {
  plannerAdd,
  plannerInfo,
  appletSetting
} from "@/utils/request.js";
export default {
  data() {
    return {
      imgApi: this.$config.imgApi,
      showImgApi: this.$config.showImgApi,
      activeStep: 0,
      form: {},
      status: 2,
      fileList1: [],
      steps: [
        {
          name: "提交",
          desc: "填写申请",
        },
        {
          name: "审核",
          desc: "处理结果",
        },
      ],
      textToCopy: 'https://www.atuanjian.com/',
      lotusAddressData: {
        visible: false,
        provinceName: "陕西省",
        cityName: "西安市",
        townName: "碑林区",
      },
      obj: {}
    };
  },
  components: {
    lotusAddress,
  },
  onLoad() {
    this.init()
  },
  methods: {
    async plannerAdd(data) {
      return await plannerAdd(data);
    },
    async plannerInfo(data) {
      return await plannerInfo(data);
    },
    async appletSetting(data) {
      return await appletSetting(data)
    },
    async handleCopy() {
      try {
        if (uni.getSystemInfoSync().platform === "web") {
          // H5 环境下使用 navigator.clipboard
          await navigator.clipboard.writeText(this.textToCopy);
        } else {
          // 非 H5 环境下使用 uni.setClipboardData
          await uni.setClipboardData({
            data: this.textToCopy,
            success: () => {
              uni.showToast({
                title: "复制成功",
                icon: "success",
              });
            },
            fail: () => {
              uni.showToast({
                title: "复制失败",
                icon: "none",
              });
            },
          });
        }
        uni.showToast({
          title: "复制成功",
          icon: "success",
        });
      } catch (err) {
        uni.showToast({
          title: "复制失败",
          icon: "none",
        });
      }
    },
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let that = this
        let a = uni.uploadFile({
          url: that.$config.upLoadApi + 'file/imageUpload',
          filePath: url,
          name: 'file',
          formData: {
            file: url,
            token: uni.getStorageSync('token'),
          },
          success: (res) => {
            var data = JSON.parse(res.data);
            uni.hideLoading()
            if (data.code == 200) {
              const result = that.$config.showImgApi + data.path;
              resolve(result);
            } else {
              reject(new Error('上传失败')); // 拒绝 Promise
            }
          },
          fail: (err) => {
            console.error(err);
            uni.hideLoading();
            reject(err); // 拒绝 Promise
          }
        });
      })
    },
    init() {
      let query1 = { user_id: JSON.parse(uni.getStorageSync('userInfo')).id }
      this.plannerInfo(query1).then(res => {
        if (res.status == 1) {
          this.activeStep = 1
        } else if (res.status == 2) {
          this.init_kefu()
          this.activeStep = 2
        } else {
          this.activeStep = 0
          Object.assign(this.form, {
            account_name: res.account_name,
            area: res.area,
            back_name: res.back_name,
            back_number: res.back_number,
            city: res.city,
            introduce: res.introduce,
            name: res.name,
            phone: res.phone,
            province: res.province
          });
          this.form.areaAddress = res.province + res.city + res.area;
        }
      })
    },
    init_kefu() {
      this.appletSetting().then(res => {
        this.obj = res
      })
    },
    async afterRead(event) {
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this.$set(this[`fileList${event.name}`], fileListLen, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }));
        fileListLen++;
      }
    },
    handleCall() {
      uni.makePhoneCall({
        phoneNumber: this.obj.service_phone.values,
      });
    },
    handleSub() {
      if (!this.form.name || !this.form.phone || this.fileList1.length == 0 || !this.form.areaAddress || !this.form.introduce || !this.form.account_name || !this.form.back_number) {
        uni.showToast({
          title: "请填写完整信息",
          icon: 'none'
        })
        return;
      }
      this.form.authentication = this.fileList1[0].url
      const data = { ...this.form, user_id: JSON.parse(uni.getStorageSync('userInfo')).id }
      this.plannerAdd(data).then((res) => {
        if (res) {
          uni.showToast({
            title: '提交成功'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      })
    },
    tapArea() {
      this.lotusAddressData.visible = true;
    },
    choseValue(res) {
      //res数据源包括已选省市区与省市区code
      console.log(res);
      this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
      //res.isChose = 1省市区已选 res.isChose = 0;未选
      if (res.isChose) {
        this.lotusAddressData.provinceName = res.province; //省
        this.lotusAddressData.cityName = res.city; //市
        this.lotusAddressData.townName = res.town; //区
        // this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
        this.form.province = res.province;
        this.form.city = res.city;
        this.form.area = res.town;
        this.form.areaAddress = this.form.province + this.form.city + this.form.area;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tip {
  width: 637rpx;
  text-align: center;
  font-size: 25rpx;
  margin: 0 auto;

  .tt {
    font-size: 25rpx;
    margin-top: 32rpx;
  }

  image {
    width: 244rpx;
    height: 244rpx;
    margin: 50rpx auto 0;
  }

  .tip-number {
    font-size: 28rpx;
    color: #ffb850;
    text-decoration: underline;
    text-decoration-color: #ffb850;
  }
}

.page {
  .box-con-1 {
    width: 632rpx;
    padding: 16rpx 0 25rpx;
    background: #ffdfaf;
    border-radius: 5rpx;
    margin: 45rpx auto 0;
    flex-direction: column;
    justify-content: center;

    .box-con-1-1 {
      font-size: 24rpx;

      span {
        font-size: 32rpx;
        text-decoration: underline;
        color: #ffb850;
        text-decoration-color: #ffb850;
        font-style: italic;
      }
    }

    .box-con-1-2 {
      font-size: 24rpx;
      color: #ffb850;
      text-decoration: underline;
      text-decoration-color: #ffb850;
    }
  }

  .top-box {
    width: 694rpx;
    height: 140rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    margin: 0 auto;
  }

  .kong {
    height: 200rpx;
  }

  padding-top: 20rpx;

  .bottom-flex {
    width: 100%;
    height: 105rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    padding-bottom: 50rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.box {
  width: 694rpx;
  margin: 20rpx auto 0;
  border-radius: 16rpx;
  background-color: #ffffff;
  padding-bottom: 33rpx;

  .tip-con {
    margin: 39rpx auto 0;
    font-size: 25rpx;
    text-align: center;
    width: 637rpx;
  }

  .number {
    margin: 20rpx auto 0;
    font-size: 25rpx;
    text-align: center;

    span {
      color: #ffb850;
      text-decoration: underline;
      text-decoration-color: #ffb850;
    }
  }

  .box-titles {
    font-size: 24rpx;
    font-weight: bold;
    margin: 48rpx auto 0;
    text-align: center;
  }

  ::v-deep .u-icon {
    margin: 0 auto;
  }

  ::v-deep .u-icon--right {
    flex-direction: column !important;
  }

  .box-title {
    font-size: 27rpx;
    padding: 15rpx 0 30rpx;
    margin-left: 32rpx;
  }

  ::v-deep.u-upload {
    width: 240rpx;
    height: 170rpx;
    background-color: #facd91;
    border-radius: 12rpx;
    margin-top: 30rpx;
    margin-left: 36rpx;

    .upload {
      width: 240rpx;
      height: 170rpx;
      text-align: center;
      font-size: 22rpx;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      image {
        width: 138rpx;
        height: 118rpx;
      }
    }
  }

  ::v-deep .u-textarea {
    font-size: 26rpx;
    width: 633rpx;
    padding: 30rpx 0;
    margin: 0 auto;
    border: none;
  }

  .tips {
    font-size: 23rpx;
    color: #ffb850;
    width: 621rpx;
    margin: 34rpx auto 0;
    line-height: 42rpx;
  }

  .box-item {
    width: 633rpx;
    padding: 32rpx 0;
    border-bottom: 1rpx solid#f2f2f2;
    margin: 0 auto;
    justify-content: space-between;

    .box-item-1 {
      font-size: 25rpx;

      span {
        color: #d9001b;
      }
    }

    input {
      font-size: 26rpx;
      border: none;
      text-align: right;
    }
  }
}

.con-1 {
  width: 694rpx;
  height: 140rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
</style>